/**
* @description: 通信管控首页
* @author: JiWei
* @remark: 首页角色划分
* 角色划分：
*   施工现场负责人
*   监理人员
*   省运行人员
*      （工程列表、待办工作）
*   施工单位负责人
*       (物资到货查看、工程列表查看、月计划查看、周计划查看、首页统计(工程概况、物资到货统计))
*   省信通管控人员-只查看（
*       首页菜单(现场打卡、物资到货查看、工程列表查看、月计划查看、周计划查看)
*       首页统计(工程概况、物资到货统计)
*   省信通管控人员-有待办
*       首页菜单（现场打卡、物资到货查看、工程列表查看、月计划查看、周计划查看）
*       首页统计 (工程概况、物资到货统计）
*       待办工作
**/
<template>
  <view class="home-container">
    <view class="nav">
      <view class="left-title">
        <van-icon name="arrow-left" @click="exitBtn" style="margin-right: 4px;vertical-align: middle;"/>
        首页
      </view>
    </view>
    <view class="main-content">
      <!-- 施工 菜单   -->
      <view class="header-menu"
            v-if="txgkAuth === 'LEADER_PROVINCE' ||
            txgkAuth === 'CONTROL_PROVINCE' ||
            txgkAuth === 'SITE_MANAGER' ||
            txgkAuth === 'UNIT_PERSON' ||
            txgkAuth === 'SUPERVISOR_PERSON'" :style="{'marginBottom':marginBottom}">
        <ul class="search-menu">
          <li
              v-for="(item,index) in menuList"
              :key="index"
              @click="jump(item.MODEL_VALUE)">
            <img :src="require(`../../../static/controlImg/${item.ICON_URL}`)" alt="">
            <text>{{item.MODEL_VALUE}}</text>
          </li>
        </ul>
      </view>
      <!-- 工程概况 -->
      <view>
        <view class="plant-title">
          <text>工程概况</text>
        </view>
        <ul class="tour-overview">
          <li v-for="(item,index) in tourList" :key="index">
            <text class="tour-num">{{item.tourNum}}</text>
            <text class="tour-text">{{item.tourTitle}}</text>
          </li>
        </ul>
      </view>
      <!-- 施工现场负责人、监理人员、省信通管控人员-有待办  待办工作 -->
      <view v-if="txgkAuth === 'CONTROL_PROVINCE' || txgkAuth === 'SITE_MANAGER' || txgkAuth === 'SUPERVISOR_PERSON'">
        <view class="plant-title" >
          <text class="platn-first">待办工作</text>
          <text class="plant-more" @click="getMore">更多</text>
        </view>
        <ul class="todo-main">
          <view v-if="todoList.length === 0" class="todo-content">
            <text>暂无此数据</text>
          </view>
          <li v-for="(item,index) in todoList" :key="index"  @click="jumpTodoDetails(item)">
              <img src="../../../static/controlImg/index-tz.png" alt="">
              <view class="todo-right">
                <p>{{item.ENG_NAME}}</p>
                <p>{{ item.FILL_TIME }}</p>
            </view>

          </li>
        </ul>
      </view>
      <!-- 省信通管控人员-查看、省信通管控人员-待办、施工单位负责人  里程碑统计   -->
      <view  v-if="txgkAuth === 'CONTROL_PROVINCE'">
        <view class="plant-title">
          <text>里程碑统计</text>
        </view>
        <view class="mileston-statistics">
          <echartsPie v-bind="milestoneEchart"></echartsPie>
        </view>
      </view>
      <!-- 施工现场负责人、监理人员 施工统计 -->
      <view>
        <view class="plant-title">
          <text>施工统计</text>
        </view>
        <view class="construction-statistics">
          <echartsPie v-bind="progessEchart" @echartsPie="echartsPieClick"></echartsPie>
        </view>
      </view>
      <!-- 施工现场负责人、监理人员 现场统计 -->
      <view>
        <view class="plant-title">
          <text>现场统计</text>
        </view>
        <view class="field-statistics">
          <!--  省信通  -->
          <echartsPie v-bind="sceneEchart" v-if="txgkAuth === 'LEADER_PROVINCE'"></echartsPie>
          <echartBox v-bind="taskEchart" @echartClick="echartClick" v-if="txgkAuth !== 'LEADER_PROVINCE'"></echartBox>
        </view>
      </view>
      <!-- 省信通管控人员-查看、省信通管控人员-待办、施工单位负责人  问题统计   -->
      <view v-if="txgkAuth === 'LEADER_PROVINCE' || txgkAuth === 'CONTROL_PROVINCE'">
        <view class="plant-title">
          <text>问题统计</text>
        </view>
        <view class="construction-statistics">
          <echartsPie v-bind="questionEchart"></echartsPie>
        </view>
      </view>
      <view class="hint-text">
        <p></p>
        <text style="color: #ccc;">你用电 · 我放心</text>
        <p></p>
      </view>
    </view>
    <tabBar :current="bottomTab" :list="list"></tabBar>
  </view>
</template>
<script>
import tabBar from '../../../components/common/tabBar'
import echartsPie from '../../../components/common/echartsPie2.vue'
import echartBox from '../../../components/common/echartBox2.vue'
import {mapGetters} from "vuex";
import baseConfig from "../../../common/config";

export default {

  name: 'index',
  components: {tabBar,echartsPie,echartBox},
  props: {},
  data() {
    return {
      searchValue:'',
      menuList:[],//遍历菜单
      todoList:[],
      bottomTab: 0,
      list:[
        {
          text: "首页", // 页面标题
          icon: require("../../../static/controlImg/index-homefalse.png"), //未选中图标
          icon_a: require("../../../static/controlImg/index-hometrue.png"), //选中图片
          path: "",
        },
        {
          text: "工程地图", // 页面标题
          icon: require("../../../static/controlImg/index-mapfalse.png"), //未选中图标
          icon_a: require("../../../static/controlImg/index-maptrue.png"), //选中图片
          path: "",
        },
        {
          text: "施工日历", // 页面标题
          icon: require("../../../static/controlImg/index-datefalse.png"), //未选中图标
          icon_a: require("../../../static/controlImg/index-datetrue.png"), //选中图片
          path: "",
        },
        {
          text: "我的", // 页面标题
          icon: require("../../../static/controlImg/index-minefalse.png"), //未选中图标
          icon_a: require("../../../static/controlImg/index-minetrue.png"), //选中图片
          path: "",
        }
      ],
      tourList:[],
      params: {},
      constructionEcharts:[], // 施工统计
      fieldStatisticsEcharts:[], // 现场统计 柱状图
      fieldStatisticsPieEcharts:[], // 现场统计 饼图
      problemPieEcharts:[], // 问题统计 饼图
      milestonePieEcharts:[], // 里程碑统计 饼图
      canReset: false
    };
  },
  computed: {
    ...mapGetters(['userData','txgkAuth']),
    marginBottom:function() {
      if(this.menuList.length > 5) {
        return 14.8 + 'vh'
      }else {
        return 5.5 + 'vh'
      }
    },
    milestoneEchart:function() {
      const xData =  Array.from(this.milestonePieEcharts,({overFlagName}) => overFlagName);
      const yData = Array.from(this.milestonePieEcharts,({pstatusNumber}) => pstatusNumber);
      const charDataPie = {
        boxType: 'pieCri',
        xData: xData,
        yData: [yData],
        color:['#5494FF','#53D25B','#FF7271'],
        legendData: xData,
        criRadius:['45%', '70%'],
        legendConfig:{
          orient: 'vertical',
          left:'60%',
          align:'left',
          top:'40%',
          itemHeight: 10,
          itemWidth: 10,
          itemGap:20,
        },

        grid:{
          top: '0px', left: '2%', right: '4%', bottom: '0px', containLabel: true
        }
      };
      return charDataPie;
    },
    questionEchart:function() {
      const xData =  Array.from(this.problemPieEcharts,({typeFlagName}) => typeFlagName);
      const yData = Array.from(this.problemPieEcharts,({pstatusNumber}) => pstatusNumber);
      const charDataPie = {
        boxType: 'pieCri',
        xData: xData,
        yData: [yData],
        color:['#5494FF','#53D25B','#FF7271'],
        legendData: xData,
        criRadius:['45%', '70%'],
        legendConfig:{
          orient: 'vertical',
          left:'60%',
          align:'left',
          top:'30%',
          itemHeight: 10,
          itemWidth: 10,
          itemGap:20,
        },

        grid:{
          top: '0px', left: '2%', right: '4%', bottom: '0px', containLabel: true
        }
      };
      return charDataPie;
    },
    progessEchart:function() {
      const xData = Array.from(this.constructionEcharts,({statusCodeName}) => statusCodeName);
      const yData = Array.from(this.constructionEcharts,({statusCodeNumber}) => statusCodeNumber);
      const charDataPie = {
        boxType: 'pieCri',
        xData: xData,
        yData: [yData],
        color:['#5494FF','#53D25B','#FF7271','#FEC319'],
        legendData: xData,
        criRadius:['45%', '70%'],
        legendConfig:{
          orient: 'vertical',
          left:'60%',
          align:'left',
          top:'30%',
          itemHeight: 10,
          itemWidth: 10,
          itemGap:20,
        },

        grid:{
          top: '0px', left: '2%', right: '4%', bottom: '0px', containLabel: true
        }
      };
      return charDataPie;
    },
    taskEchart:function() {
      const xData = Array.from(this.fieldStatisticsEcharts,({month}) => month);
      let yData = [Array.from(this.fieldStatisticsEcharts,({sceneNumber}) => sceneNumber)]
      const charData = {
        boxType: 'bar',
        xData: xData,
        yData: yData,
        rotate: 45,
        color: ['#5494FF'],
        grid: {top: '30px', left: '4%', right: '10%', bottom: '6%', containLabel: true},
      };
      return charData;
    },
    sceneEchart:function() {
      const xData = Array.from(this.fieldStatisticsPieEcharts,({areaSimpleName}) => areaSimpleName);
      const yData = Array.from(this.fieldStatisticsPieEcharts,({sceneNumber}) => sceneNumber);
      const charDataPie = {
        boxType: 'pieCri',
        xData: xData,
        yData: [yData],
        color:['#fe19eb','#975eff','#5494ff','#54c1ff','#70e521','#25cd74','#ff7271','#f2d516','#fec319','#ffe011','#ff9519'],
        legendData: xData,
        criRadius:['50%', '75%'],
        centerPie:['30%', '45%'],
        legendConfig:{
          type:'scroll',
          orient: 'vertical',
          left:'60%',
          align:'left',
          top:'14%',
          itemHeight: 10,
          itemWidth: 10,
          itemGap:10,
        },
      };
      return charDataPie;
    }
  },
  watch: {},
  onLoad() {
    this.params = {
      userId: this.userData.USERID,
      roleId: this.userData.ROLEID
    }
    this.getMenu()
    this.getProjectOverViewI()
    this.getMatterlist()
    this.getConstructionCount()
    this.getSceneCount()
    this.getSxtSceneCount()
    this.getProblemCount()
    this.getMilestone()
  },
  onShow(){
    this.canReset && this.againRefresh()
    this.canReset = true
  },
  methods: {
    againRefresh(){
      this.getProjectOverViewI()
      this.getMatterlist()
      this.getConstructionCount()
      this.getSceneCount()
      this.getSxtSceneCount()
      this.getProblemCount()
      this.getMilestone()
    },
    echartClick(params) {
      uni.navigateTo({
        url: `/pages/communicationControl/details/fieldStatistics?name=${params.name}`
      })
    },
    echartsPieClick(params) {
      if(this.txgkAuth === 'LEADER_PROVINCE') {
        return ''
      }else {
        uni.navigateTo({
          url: `/pages/communicationControl/details/projectList?name=${params.name}`
        })
      }
    },
    // 获取菜单
    getMenu() {
      let params = {
        roleId:this.userData.ROLEID
      }
      this.$apiRequest.gcgkApi.getMenuByRole(params).then(res => {
        this.menuList = res.data
      })
    },
    // 获取工程概况
    getProjectOverViewI() {
      this.$apiRequest.gcgkApi.getProjectOverView(this.params).then(res => {
       this.tourList = [
         {
           tourNum: res.data.onSiteToday?res.data.onSiteToday:0,
           tourTitle:'今日现场',
         },
         {
           tourNum: res.data.engineeringProgress?res.data.engineeringProgress:0+'%',
           tourTitle:'工程进度',
         },
         {
           tourNum: res.data.persons?res.data.persons:0,
           tourTitle:'施工人数',
         },
         {
           tourNum: res.data.batchTotals?res.data.batchTotals:0,
           tourTitle:'批次总数',
         },
         {
           tourNum: res.data.moneys?res.data.moneys:0,
           tourTitle:'金额(万)',
         },
         {
           tourNum: res.data.projectsTotals?res.data.projectsTotals:0,
           tourTitle:'施工总数',
         },
       ]
      })
    },
    // 获取待办列表
    getMatterlist() {
      let params = {
        userid: this.userData.USERID,
        roleid: this.userData.ROLEID,
        rows: '3'
      }
      this.$apiRequest.gcgkApi.getMatterlist(params).then(res => {
        if(res.rows === []) {
          this.todoList = '暂无数据'
        }else {
          this.todoList = res.rows
        }
      })
    },
    // 获取施工统计（施工负责人）
    getConstructionCount() {
      this.$apiRequest.gcgkApi.constructionCount(this.params).then(res => {
        this.constructionEcharts = res.data
      })
    },
    // 获取现场统计
    getSceneCount() {
      this.$apiRequest.gcgkApi.sceneCount(this.params).then(res => {
        this.fieldStatisticsEcharts = res.data
      })
    },
    // 获取现场统计 省信通查看
    getSxtSceneCount() {
      this.$apiRequest.gcgkApi.sxtSceneCount(this.params).then(res => {
        this.fieldStatisticsPieEcharts = res.data
      })
    },
    // 获取问题统计
    getProblemCount() {
      this.$apiRequest.gcgkApi.problemCount(this.params).then(res => {
        console.log(res,'reew')
        this.problemPieEcharts = res.data
      })
    },
    // 获取里程碑统计
    getMilestone() {
      this.$apiRequest.gcgkApi.milestone(this.params).then(res => {
        this.milestonePieEcharts = res.data
      })
    },
    // 模块跳转
    jump(item) {
      switch(item) {
        case '施工现场': {
          uni.navigateTo({
            url: '/pages/communicationControl/workbench/spotClocking'
          })
          break;
        }
        case '施工填报': {
          uni.navigateTo({
            url: '/pages/communicationControl/workbench/constructionFilling/index'
          })
          break;
        }
        case '物资到货': {
          if(this.txgkAuth === 'LEADER_PROVINCE' || this.txgkAuth === 'CONTROL_PROVINCE'){
            uni.navigateTo({
              url: '/pages/communicationControl/workbench/arrivalofMaterials/materialPreview'
            })
          }else{
            uni.navigateTo({
              url: '/pages/communicationControl/workbench/arrivalofMaterials/index'
            })
          }
          break;
        }
        case '月计划': {
			uni.navigateTo({
			  url: '/pages/communicationControl/workbench/monthlyPlan/index'
			})
			break;
        }
        case '周计划': {
			uni.navigateTo({
				url: '/pages/communicationControl/workbench/weeklyShedule/index'
			})
			break;
        }
        case '工程列表': {
          uni.navigateTo({
            url: '/pages/communicationControl/workbench/projectList/index'
          })
			break;
        }
        case '更多': {
          uni.navigateTo({
            url: ''
          })
          break;
        }
      }
    },
	jumpTodoDetails(item){
		if(item.DBLX === 'SP'){
			// 审批
			uni.navigateTo({
			  url: `/pages/communicationControl/workbench/todoTask/projectAudit?engId=${item.ENG_ID}&stationId=${item.STATION_ID}&state=${'index'}`
			})
		}else{
			// 问题整改
			uni.navigateTo({
			  url: `/pages/communicationControl/workbench/todoTask/problemRectification?engId=${item.ENG_ID}&stationId=${item.STATION_ID}`
			})
		}
	},
    // 更多点击
    getMore() {
      uni.navigateTo({
        url: '/pages/communicationControl/workbench/todoTask/todoList'
      })
    },
    exitBtn() {
      baseConfig.actions.exitIgw();
    }
  }
};
</script>
<style scoped lang="scss">
.home-container {
  width: 100vw;
  height: 100vh;
  .nav {
    width: 100vw;
    height: px2vh(163);
    background: #417ADC;
    position: relative;
    .left-title{
      float: left;
      margin-left: px2vw(40);
      padding-top: px2vh(75);
      font-weight: bold;
      line-height: px2vh(50);
      height: px2vh(54);
      font-size: px2vh(54);
      color: #fff;
      img {
        width: px2vw(44);
        height: px2vh(28);
        vertical-align: middle;
      }
    }
  }
  .main-content {
    height: calc(100vh - #{px2vh(294)});
    background: #F2F6FA;
    overflow: auto;

    .header-menu {
      //height: px2vh(316);
      height: px2vh(316);
      background: #417ADC;
      border-radius:  0 0 px2vw(40) px2vw(40);
      .search-menu {
        width: px2vw(1020);
        margin-left: px2vw(30);
        height: auto;
        background: url("../../../static/controlImg/index-border.png") no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding: px2vh(80) px2vh(50);
        box-sizing: border-box;
        li {
          width: 25%;
          flex-shrink: 0;
          align-self: center;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          img {
            width: px2vw(120);
          }
          text {
            font-size: px2vw(36);
            margin-top: px2vw(20);
            color: rgba(51,51,51,.7);
          }
        }
        li:nth-child(-n+4){
          margin-bottom:px2vh(48);
        }
      }
    }

    .plant-title {
      width: calc(100% - #{px2vw(80)});
      display: flex;
      flex-wrap: nowrap;
      color: #666;
      font-weight: bold;
      font-size: px2vw(40);
      margin: px2vh(30) px2vw(30);
      .platn-first {
        display: flex;
        flex: 1;
        justify-content: flex-start;
      }
      .plant-more {
        color: #417adc;
        font-size: px2vw(36);
      }
    }
    //公共
    .tour-overview,.construction-statistics,.todo-main,.field-statistics,.mileston-statistics {
      width: calc(100vw - #{px2vw(60)});
      margin-left: px2vw(30);
      background: #fff;
      border-radius: px2vw(20);
    }
    // 工程概况
    .tour-overview {
      display: flex;
      height: px2vh(480);
      flex-direction: row;
      flex-wrap: wrap;
      padding: px2vh(90) px2vw(110);
      box-sizing: border-box;
      li {
        width: calc((100% - #{px2vw(360)}) / 3);
        margin-bottom: px2vh(82);
        margin-right: px2vw(180);
        display: flex;
        flex-direction: column;
        align-items: center;
        .tour-num {
          color: #417adc;
          font-size: px2vw(66);
          font-weight: bold;
        }
        .tour-text {
          color: #666;
          font-size: px2vw(36);
        }
      }
      li:nth-child(3),li:nth-child(6) {
        margin-right: 0;
      }
    }
    // 待办工作
    .todo-main {
      background: #F2F6FA;
      display: flex;
      flex-direction: column;
      height: auto;
      .todo-content {
        width: 100%;
        background: #fff;
        text-align: center;
        color: #666;
        font-size: px2vh(36);
        font-weight: bold;
        padding: px2vh(30) 0;
        border-radius: px2vw(20);
      }
      li {
        width: 100%;
        background: #fff;
        margin-bottom: px2vh(30);
        border-radius: px2vw(20);
        display: flex;
        flex-direction: row;
          img {
            width: px2vw(92);
            height: px2vh(92);
            margin:  px2vh(48) px2vw(44);
          }
          .todo-right {
            width: calc(100% - #{px2vw(230)});
            height: calc(100% - #{px2vh(96)});
            margin-top: px2vh(48);
            p:first-child {
              font-size: px2vw(42);
              color: #666;
              white-space:nowrap;
              overflow:hidden;
              text-overflow:ellipsis;
            }
            p:last-child {
              font-size: px2vw(38);
              margin-top: px2vh(12);
              color: #ccc;
            }
          }
      }
      li:last-child {
        margin-bottom: 0;
      }
    }
    // 里程碑统计
    .mileston-statistics {
      height: px2vh(520);
    }
    // 施工统计
    .construction-statistics {
      height: px2vh(520);
    }
    // 现场统计
    .field-statistics {
      height: px2vh(590);
    }
    .hint-text {
      font-size: px2vw(32);
      text-align: center;
      width: calc(100vw - #{px2vw(300)});
      margin-top: px2vh(70);
      margin-left: px2vw(150);
      margin-bottom: px2vh(70);
       p {
         width: px2vw(240);
         background: #ccc;
         height: px2vh(1);
         float: left;
         margin-top: px2vh(16);
       }
      p:last-child {
        float: right;
      }
    }
  }

}

</style>
